<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="../static/echarts.min.js"></script>
    <title>Document</title>
  </head>

  <body>
    <div id="main"></div>
    <style>
      #main {
        width: 100%;
        height: 400px;
      }
    </style>
    <script>
      window.onload = function () {
        const chart = echarts.init(document.getElementById("main"));

        const option = {
          title: {
            text: "综合考核评价情况",
            left: "center",
          },
          tooltip: {
            trigger: "item",
            formatter: (params) => {
              return `${params.seriesName}<br>${params.name} (${params.value[1]} - ${params.value[0]}): ${params.value[2]}`;
            },
          },
          legend: {
            data: ["优", "良"],
            top: 20,
            right: "center",
          },
          grid: {
            left: "10%",
            right: "10%",
            bottom: "10%",
            containLabel: true,
          },
          xAxis: {
            type: "category",
            data: ["组1", "组2", "组3", "组4", "组5"],
            boundaryGap: true,
            axisLine: {
              show: true,
              lineStyle: {
                color: "#ccc",
              },
            },
            axisTick: { show: false },
            splitLine: {
              show: true,
              lineStyle: {
                color: "#eaeaea",
                type: "dashed",
              },
            },
          },
          yAxis: {
            type: "category",
            data: ["2024年", "2023年", "2022年", "2021年", "2020年"],
            boundaryGap: false,
            axisLine: {
              show: true,
              lineStyle: {
                color: "#ccc",
              },
            },
            axisTick: { show: false },
          },
          series: [
            // 班子1的“优”数据
            {
              name: "优",
              type: "custom",
              renderItem: function (params, api) {
                const categoryIndex = api.value(0); // 班子
                const start = api.coord([categoryIndex, api.value(1)]); // 起点
                const end = api.coord([categoryIndex, api.value(2)]); // 终点
                const width = api.size([0.8, 0])[0]; // 矩形宽度

                return {
                  type: "rect",
                  shape: {
                    x: start[0] - width / 2,
                    y: end[1],
                    width: width,
                    height: start[1] - end[1],
                  },
                  style: api.style(),
                };
              },
              itemStyle: {
                color: "#00aaff", // "优"的颜色
              },
              encode: {
                x: 0,
                y: [1, 2],
              },
              data: [
                ["组1", "2023年", "2022年"], // 班子1的"优"数据，2023到2022
                ["组1", "2021年", "2020年"], // 班子1的"优"数据，2021到2020
              ],
            },
            // 班子1的"良"数据
            {
              name: "良",
              type: "custom",
              renderItem: function (params, api) {
                const categoryIndex = api.value(0); // 班子
                const start = api.coord([categoryIndex, api.value(1)]); // 起点
                const end = api.coord([categoryIndex, api.value(2)]); // 终点
                const width = api.size([0.8, 0])[0]; // 矩形宽度

                return {
                  type: "rect",
                  shape: {
                    x: start[0] - width / 2,
                    y: end[1],
                    width: width,
                    height: start[1] - end[1],
                  },
                  style: api.style(),
                };
              },
              itemStyle: {
                color: "#76d7ea", // "良"的颜色
              },
              encode: {
                x: 0,
                y: [1, 2],
              },
              data: [
                ["组1", "2023年", "2022年"], // 班子1的"良"数据，2023到2022
                ["组1", "2022年", "2021年"], // 班子1的"良"数据，2022到2021
              ],
            },
            // 班子2和其它班子数据按照相同方式处理
            {
              name: "优",
              type: "custom",
              renderItem: function (params, api) {
                const categoryIndex = api.value(0);
                const start = api.coord([categoryIndex, api.value(1)]);
                const end = api.coord([categoryIndex, api.value(2)]);
                const width = api.size([0.8, 0])[0];

                return {
                  type: "rect",
                  shape: {
                    x: start[0] - width / 2,
                    y: end[1],
                    width: width,
                    height: start[1] - end[1],
                  },
                  style: api.style(),
                };
              },
              itemStyle: {
                color: "#00aaff",
              },
              encode: {
                x: 0,
                y: [1, 2],
              },
              data: [
                ["组2", "2023年", "2022年"], // 班子2的"优"数据
                ["组3", "2021年", "2020年"], // 班子3的"优"数据
              ],
            },
            {
              name: "良",
              type: "custom",
              renderItem: function (params, api) {
                const categoryIndex = api.value(0);
                const start = api.coord([categoryIndex, api.value(1)]);
                const end = api.coord([categoryIndex, api.value(2)]);
                const width = api.size([0.8, 0])[0];

                return {
                  type: "rect",
                  shape: {
                    x: start[0] - width / 2,
                    y: end[1],
                    width: width,
                    height: start[1] - end[1],
                  },
                  style: api.style(),
                };
              },
              itemStyle: {
                color: "#76d7ea",
              },
              encode: {
                x: 0,
                y: [1, 2],
              },
              data: [
                ["组2", "2023年", "2022年"], // 班子2的"良"数据
                ["组3", "2022年", "2021年"], // 班子3的"良"数据
              ],
            },
          ],
        };

        // 使用刚指定的配置项和数据显示图表
        chart.setOption(option);
      };
    </script>
  </body>
</html>
